import React from 'react';
import { Menu } from 'antd';


const { SubMenu } = Menu;

export default class MerchantMenu extends React.Component {
  constructor(props) {
    super(props);
    const { location } = props;
    const pathSnippets = location.pathname.split('/').filter(i => i);
    const selectedMenus = pathSnippets.map((_, index) => {
      return `/${pathSnippets.slice(0, index + 1).join('/')}`;
    });
    this.state = {
      current: selectedMenus[1] || selectedMenus[0],
      openKeys: [selectedMenus[0]],
    };
  }
  state = {
    openKeys: '',
    current: '',
  }
  onOpenChange = (openKeys) => {
    const state = this.state;
    const latestOpenKey = openKeys.find(key => !(state.openKeys.indexOf(key) > -1));
    const latestCloseKey = state.openKeys.find(key => !(openKeys.indexOf(key) > -1));

    let nextOpenKeys = [];
    if (latestOpenKey) {
      nextOpenKeys = this.getAncestorKeys(latestOpenKey).concat(latestOpenKey);
    }
    if (latestCloseKey) {
      nextOpenKeys = this.getAncestorKeys(latestCloseKey);
    }
    if (openKeys.length && openKeys.length > 1 && openKeys[1].indexOf('http') == 0) {
      window.location.href = openKeys[1]; // eslint-disable-line
    }
    if (openKeys.length && openKeys.length == 1 && openKeys[0].indexOf('http') == 0) {
      window.location.href = openKeys[0]; // eslint-disable-line
    }
    this.setState({ openKeys: nextOpenKeys });
  }
  getAncestorKeys = (key) => {
    const map = {
      sub3: ['sub2'],
    };
    return map[key] || [];
  }
  render() {
    const { data = [], history } = this.props;
    return (
      <div>
        <div style={{margin: '10px 10px 40px', textAlign: 'center'}}>
          <i className="logo" />
          <p className="logo-txt">商户后台管理系统</p>
        </div>
        <Menu
          mode="inline"
          theme="dark"
          openKeys={this.state.openKeys}
          selectedKeys={[this.state.current]}
          onOpenChange={this.onOpenChange}
          onClick={(menu) => {
            this.setState({ current: menu.key });
            if (menu.key && menu.key.indexOf('http') == 0) {
              window.location.href = menu.key; // eslint-disable-line
            } else {
              history.push({pathname: menu.key});
            }
          }}
        >
          {data.map((menu) => {
            if (!menu.children || menu.children.length == 0) {
              return (
                <Menu.Item key={menu.url}>
                  <i className={`iconfont icon-${menu.icon}`} />
                  <span style={{marginLeft: 8}}>{menu.name}</span>
                </Menu.Item>
              );
            } else {
              return (
                <SubMenu
                  key={menu.url}
                  title={
                    <span>
                      <i className={`iconfont icon-${menu.icon}`} />
                      <span style={{marginLeft: 8}}>{menu.name}</span>
                    </span>}
                  >
                  {menu.children.map((subMenu) => {
                    return (
                      <Menu.Item key={subMenu.url}>
                        <span>{subMenu.name}</span>
                      </Menu.Item>
                    );
                  })}
                </SubMenu>
              );
            }
          })}
        </Menu>
      </div>
    );
  }
}

